<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24" :style="{ paddingRight:'12px' }" class="home_header">
      <a-col :span="4" :style="{ marginBottom: '24px',paddingRight:'0px' }">
        <chart-card :loading="loading" title="用户总数" :total="homeItem.userTotal | NumberFormat">
        </chart-card>
      </a-col>
      <a-col :span="4" :style="{ marginBottom: '24px',paddingRight:'0px' }">
        <chart-card :loading="loading" title="今日总下载(个)" :total="homeItem.todayDownloadNumber | NumberFormat">
          <div>
            <trend :flag="parseFloat(homeItem.downloadWeekRate) <= 0? 'down' : 'up'" style="margin:0">
              <span slot="term">环比上周</span>
              {{ homeItem.downloadWeekRate }}%
            </trend>
          </div>
        </chart-card>
      </a-col>
      <a-col :span="4" :style="{ marginBottom: '24px',paddingRight:'0px' }">
        <chart-card :loading="loading" title="今日总试用(次)" :total="homeItem.todayOnTrialNumber | NumberFormat">
          <div>
            <trend :flag="parseFloat(homeItem.onTrialWeekRate) <= 0? 'down' : 'up'" style="margin-right: 0px;">
              <span slot="term">环比上周</span>
              {{ homeItem.onTrialWeekRate }}%
            </trend>
          </div>
        </chart-card>
      </a-col>
      <a-col :span="4" :style="{ marginBottom: '24px',paddingRight:'0px' }">
        <chart-card :loading="loading" title="今日总日活(人)" :total="homeItem.todayDau | NumberFormat">
          <div>
            <trend :flag="parseFloat(homeItem.dauWeekRate) <= 0? 'down' : 'up'" style="margin-right: 0px;">
              <span slot="term">环比上周</span>
              {{ homeItem.dauWeekRate }}%
            </trend>
          </div>
        </chart-card>
      </a-col>
      <a-col :span="4" :style="{ marginBottom: '24px',paddingRight:'0px' }">
        <chart-card :loading="loading" title="今日总添加(个)" :total="homeItem.todayAddDestopNumber | NumberFormat">
          <div>
            <trend :flag="parseFloat(homeItem.addDestopWeekRate) <= 0? 'down' : 'up'" style="margin-right: 0px;">
              <span slot="term">环比上周</span>
              {{ homeItem.addDestopWeekRate }}%
            </trend>
          </div>
        </chart-card>
      </a-col>
      <a-col :span="4" :style="{ marginBottom: '24px',paddingRight:'0px' }">
        <chart-card :loading="loading" title="今日总注册" :total="homeItem.todayRegisterNumber | NumberFormat">
          <div>
            <trend :flag="parseFloat(homeItem.registerWeekRate) <= 0? 'down' : 'up'" style="margin-right: 0px;">
              <span slot="term">环比上周</span>
              {{ homeItem.registerWeekRate }}%
            </trend>
          </div>
        </chart-card>
      </a-col>
    </a-row>
    <div class="antd-pro-pages-dashboard-analysis-twoColLayout">
      <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" title="当前在线人数" :style="{ height: '100%' }">
            <people-line-chart :onlineNumbers="onlineNumbers"></people-line-chart>
          </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="最佳类别" :style="{ height: '100%' }">
            <a-radio-group defaultValue="1" @change="bestChange" :style="{ marginBottom: '8px' }">
              <a-radio-button value="1">应用</a-radio-button>
              <a-radio-button value="2">游戏</a-radio-button>
            </a-radio-group>
            <best-table :bestList="bestList" :loadTable="loadTable"></best-table>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <div class="antd-pro-pages-dashboard-analysis-twoColLayout">
      <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" title="下载/试用走势图" :style="{ height: '100%' }">
            <download-line-chart :onTrialNumbers="homeItem.onTrialNumbers" :downloadNumbers="homeItem.downloadNumbers"></download-line-chart>
          </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="热门关注" :style="{ height: '100%' }">
            <a-radio-group defaultValue="1" @change="hotChange" :style="{ marginBottom: '8px' }">
              <a-radio-button value="1">试用</a-radio-button>
              <a-radio-button value="0">下载</a-radio-button>
            </a-radio-group>
            <hot-list :hotList="hotList" :loadHot="loadHot"></hot-list>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <div class="antd-pro-pages-dashboard-analysis-twoColLayout">
      <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" title="地域分布" :style="{ height: '100%' }">
            <address-pre-chart :userAreas="homeItem.userAreas"></address-pre-chart>
          </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="手机品牌" :style="{ height: '100%' }">
            <phone-pre-chart :mobileBrands="homeItem.mobileBrands"></phone-pre-chart>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { ChartCard, Trend, NumberInfo } from '@/components'
import BestTable from './components/BestTable'
import HotList from './components/HotList'
import AddressPreChart from './bizcharts/AddressPreChart'
import PhonePreChart from './bizcharts/PhonePreChart'
import PeopleLineChart from './bizcharts/PeopleLineChart'
import DownloadLineChart from './bizcharts/DownloadLineChart'
import { mapActions } from 'vuex'
export default {
  name: 'DataIndex',
  components: {
    ChartCard,
    Trend,
    NumberInfo,
    BestTable,
    HotList,
    AddressPreChart,
    PhonePreChart,
    PeopleLineChart,
    DownloadLineChart
  },
  data () {
    return {
      loading: true,
      homeItem: {},
      bestList: [],
      hotList: [],
      loadTable: 1,
      loadHot: 1,
      onlineNumbers: []
    }
  },
  mounted () {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.ApiHome()
    this.ApiBest(1)
    this.ApiHot(1)
  },
  methods: {
    ...mapActions(['HomeIndex', 'BestList', 'HotList']),
    bestChange (val) { // 最佳类别
      this.ApiBest(val.target.value)
      this.loadTable = val.target.value
    },
    hotChange (val) { // 热门
      this.ApiHot(val.target.value)
      this.loadHot = val.target.value
    },
    ApiHome () { // 首页
      this.HomeIndex()
        .then((res) => {
          if (res.status === 200 || res.status === '200') {
            this.homeItem = res.data
            var rows = res.data.onlineNumbers
            this.homeItem.onlineNumbers.sort(function (b, a) {
              return Date.parse(b.time) - Date.parse(a.time)
            })
            this.onlineNumbers = rows
          } else {
            this.requestFailed(res)
          }
        })
        .catch(err => this.requestFailed(err))
    },
    ApiBest (firstTypeId) { // 最佳类别
      var data = {
        firstTypeId: firstTypeId,
        page: 1,
        pageSize: 5
      }
      this.BestList(data)
        .then((res) => {
          if (res.status === 200 || res.status === '200') {
            if (res.data.list && res.data.list.length !== 0) {
              this.bestList = []
              for (var i in res.data.list) {
                res.data.list[i].id = '1' + i
                this.bestList.push(res.data.list[i])
              }
            }
          } else {
            this.requestFailed(res)
          }
        })
        .catch(err => this.requestFailed(err))
    },
    ApiHot (type) { // 热门
      var data = {
        type: type,
        page: 1,
        pageSize: 5
      }
      this.HotList(data)
        .then((res) => {
          if (res.status === 200 || res.status === '200') {
            if (res.data.list && res.data.list.length !== 0) {
              this.hotList = res.data.list
            }
          } else {
            this.requestFailed(res)
          }
        })
        .catch(err => this.requestFailed(err))
    },
    updateSuccess (res, key) {
      if (res.status === 200 || res.status === '200') {
        this.$notification['success']({
          message: '成功',
          description: res.message,
          duration: 4
        })
        this.$refs.table.refresh()
      } else {
        this.requestFailed(res)
      }
    },
    requestFailed (err) {
      this.$notification['error']({
        message: '错误',
        description: err.message || '请求出现错误，请稍后再试',
        duration: 4
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home_header /deep/ .ant-card{
  .ant-card-body{
    white-space:nowrap;
    padding-left: 10px !important;
    padding-right: 8px !important;
  }
}
</style>
